<template>
	<view class="container">
		<view v-if="!bookingList.length">
			<view class="empty-state">暂无预约记录</view>
		</view>
		<view class="repair-list" v-else>
			<view v-for="item in bookingList" :key="item.bookingId" class="repair-item">
				<view class="repair-info">
					<text class="code">预约人: {{ item.username }}</text>
					<text class="content">预约手机号: {{ item.phone }}</text>
					<text class="date">预约时间: {{ item.bookingTime }}</text>
					<text class="status">
						状态: {{ getRepairStatus(item.bookingStatus) }}
					</text>
					<view class="button-box">
						<button class="button-item" @tap="bookingDet(item.houseId,item.contractId)" :plain="true">
						预约详情
					</button>
					<button class="button-item" @tap="deleteBooking(item.bookingId)" :plain="true">
						取消预约
					</button>	
					</view>
				
				</view>
				<!-- <view v-if="item.image && item.image.length > 0" class="image-gallery"> -->
				<!-- <image v-for="img in item.image" :key="img" :src="img" class="repair-image" /> -->
				<!-- </view> -->
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { getBookingList,deleteBookingById } from '../../services/booking'
import { onLoad } from '@dcloudio/uni-app'

import type { BookingInfo } from '../../types/booking';

import { ref } from 'vue';
const bookingList = ref<BookingInfo[]>([])
onLoad(
	async () => {
		const res = await getBookingList()
		bookingList.value = res.data
	}
)

const bookingDet=(houseId:number,contractId:number)=>
{
	uni.navigateTo({ url: '/pages/booking/booking?houseId=' + houseId + '&contractId=' + contractId  })
}
function getRepairStatus(status: number | null): string {
	switch (status) {
		case 0:
			return '发起预约';
		case 1:
			return '已接收预约';
		case 2:
			return '已看房';
		case 3:
			return '预约已完成';
		default:
			return '未知';
	}
}
const commit = () => {
	uni.showToast({
		title: '确认成功'
	})
}
const deleteBooking=(bookingId:number)=>
{
	uni.showModal({
		title: '提示',
		content: '确定要取消预约吗？',
		success: async (res) => {
			if (res.confirm) {

				const res = await deleteBookingById(bookingId)
				if(res.code==200){
					uni.showToast({
						title: '取消成功',
						icon: 'none'
					});
					bookingList.value = bookingList.value.filter(item => item.bookingId !== bookingId);
					
				}
			}
		}
	})
	
}
</script>

<style>
.container {
	padding: 10px;
	background-color: #f9f9f9;
	height: 100vh;
	box-sizing: border-box;
}

.header {
	background-color: #007AFF;
	padding: 15px;
	text-align: center;
}

.title {
	font-size: 18px;
	color: #fff;
	font-weight: bold;
}

.repair-list {
	margin-top: 10px;
}

.repair-item {
	background-color: #fff;
	border-radius: 8px;
	margin-bottom: 10px;
	padding: 15px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.repair-info {
	margin-bottom: 10px;
}

.code,
.content,
.date,
.status {
	display: block;
	font-size: 14px;
	color: #333;
	margin-bottom: 5px;
}

.image-gallery {
	display: flex;
	flex-wrap: wrap;
}

.repair-image {
	width: 80px;
	height: 80px;
	object-fit: cover;
	border-radius: 4px;
	margin-right: 5px;
	margin-bottom: 5px;
}
.button-box{
	display: flex;
}
.button-item{
	margin-right: 10px;
}
</style>